<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身房后台管理系统</title>

     <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        .sidebar {
            width: 200px;
            background-color: #343957;
            color: #fff;
            padding: 20px;
        
            position: fixed;
            top: 0;
            left: 0;
          
        }
        .sidebar-logo {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .sidebar-logo h2 {
            margin: 0;
            font-size: 28px;
            font-weight: bold;
        }
        .menu-item {
            margin-bottom: 10px;
        }
        .menu-item a {
            display: block;
            padding: 15px;
            color: #fff;
            text-decoration: none;
            transition: background-color 0.3s ease;
            border-radius: 4px;
            font-size: 24px;
            text-align:center;
        }
        .menu-item a:hover {
            background-color: #667ffc;
        }
        .menu-item a.active {
            background-color: #666;
        }
        .content {
            margin-left: 240px; /* 调整内容区域位置，避免被侧边栏遮挡 */
            padding: 20px;
            background-color: #fff;
            flex: 1; /* 填充剩余空间 */
            border-radius: 8px;
        }
    </style>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="sidebar">
    <div class="sidebar-logo">
        <h2>健身房后台管理系统</h2>
    </div>
    <div class="menu-item">
        <a href="personal.jsp" data-target="personal">用户管理</a>
    </div>
    <div class="menu-item">
        <a href="schedule.jsp" data-target="schedule">课程管理</a>
    </div>
    <div class="menu-item">
        <a href="products.jsp" data-target="products">商品管理</a>
    </div>
    <div class="menu-item">
        <a href="orders.jsp" data-target="orders">订单管理</a>
    </div>
    <div class="menu-item">
        <a href="reviews.jsp" data-target="reviews">评价管理</a>
    </div>
 
    <div class="menu-item">
        <a href="#" data-target="settings">系统设置</a>
    </div>
    <div class="menu-item">
        <a href="#" data-target="help">帮助与支持</a>
    </div>
       <div class="menu-item">
        <a href="#" data-target="logout">退出登录</a>
    </div>
</div>


    <div class="content" id="content">
        <!-- 初始时内容区域为空 -->
    </div>

    <script>
        // 使用jQuery来处理事件和DOM操作
        $(document).ready(function() {
        	
        	   // 加载用户管理页面到内容区域
            $('#content').load('personal.jsp');
            // 标记用户管理标签为选中
            $('.menu-item a[href="personal.jsp"]').addClass('active');
        	
            // 选择所有的菜单项链接
            $('.menu-item a').click(function(e) {
                e.preventDefault();

                // 清除之前选中项的样式
                $('.menu-item a').removeClass('active');
                // 添加当前选中项的样式
                $(this).addClass('active');

                // 获取目标页面路径
                var pageUrl = $(this).attr('href');

                // 使用jQuery的ajax方法加载页面内容
                $.ajax({
                    url: pageUrl,
                    type: 'GET',
                    success: function(response) {
                        // 将页面内容插入到内容区域
                        $('#content').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching page:', error);
                    }
                });
            });
        });
        
        // 处理退出登录点击事件
        $('.menu-item a[data-target="logout"]').click(function(e) {
            e.preventDefault();
            // 执行退出登录逻辑，例如清除用户信息等

            // 跳转到登录页面
            window.location.href = 'adminLogin.jsp';
        });
    </script>
</body>
</html>
